<template>
  <div class="special-service-page">
    <h2 class="section-title">特色送花服务</h2>
    <p class="section-description">为您提供独特的花艺体验和贴心的送花服务</p>
    
    <div class="services-grid">
      <div class="service-card" v-for="service in services" :key="service.id">
        <div class="service-image" :style="{ backgroundColor: service.color }"></div>
        <div class="service-content">
          <h3 class="service-title">{{ service.title }}</h3>
          <p class="service-description">{{ service.description }}</p>
          <div class="service-price">
            <span class="price-label">起价:</span>
            <span class="price-value">¥{{ service.price }}</span>
          </div>
          <button class="btn-primary">了解详情</button>
        </div>
      </div>
    </div>
    
    <div class="testimonials-section">
      <h3 class="section-title">客户评价</h3>
      <div class="testimonials-slider">
        <div class="testimonial-card" v-for="testimonial in testimonials" :key="testimonial.id">
          <div class="testimonial-content">
            <div class="quote-icon">"</div>
            <p class="testimonial-text">{{ testimonial.text }}</p>
          </div>
          <div class="testimonial-author">
            <div class="author-avatar"></div>
            <div class="author-info">
              <h4 class="author-name">{{ testimonial.author }}</h4>
              <div class="rating">
                <span class="star" v-for="i in 5" :key="i">★</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="faq-section">
      <h3 class="section-title">常见问题</h3>
      <div class="accordion">
        <div 
          class="accordion-item" 
          v-for="(item, index) in faqItems" 
          :key="index"
          :class="{ 'active': activeFaq === index }"
        >
          <div class="accordion-header" @click="toggleFaq(index)">
            <h4 class="accordion-title">{{ item.question }}</h4>
            <span class="accordion-icon">{{ activeFaq === index ? '−' : '+' }}</span>
          </div>
          <div class="accordion-content" v-show="activeFaq === index">
            <p>{{ item.answer }}</p>
          </div>
        </div>
      </div>
    </div>
    
    <div class="cta-section">
      <div class="cta-content">
        <h3 class="cta-title">需要定制送花服务?</h3>
        <p class="cta-description">联系我们的客服团队，为您提供个性化的花艺解决方案</p>
        <button class="btn-primary btn-large">联系客服</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FlowerDeliveryService',
  data() {
    return {
      activeFaq: 0,
      services: [
        {
          id: 1,
          title: '生日惊喜送花',
          description: '为您的亲友准备一份生日惊喜，我们会在指定时间将精美花束送达，并可附赠生日蛋糕和贺卡。',
          price: 199,
          color: '#ffcdd2'
        },
        {
          id: 2,
          title: '周期性鲜花订阅',
          description: '每周或每月定期为您送上新鲜的时令花束，让您的家或办公室常年保持鲜花的芬芳。',
          price: 299,
          color: '#e1bee7'
        },
        {
          id: 3,
          title: '婚礼花艺定制',
          description: '专业花艺师为您的婚礼提供全方位的花艺设计，包括新娘捧花、胸花、婚礼现场装饰等。',
          price: 999,
          color: '#bbdefb'
        },
        {
          id: 4,
          title: '企业花艺服务',
          description: '为企业活动、会议、前台等场所提供专业的花艺设计和定期更换服务。',
          price: 599,
          color: '#c8e6c9'
        }
      ],
      testimonials: [
        {
          id: 1,
          text: '花漾定制的生日惊喜送花服务太棒了！我给女友订了一束玫瑰，送达时间准确，包装精美，她非常惊喜！',
          author: '李先生'
        },
        {
          id: 2,
          text: '我为办公室订了周期性鲜花订阅服务，每周都有新鲜的花束送来，同事们都很喜欢，办公环境也变得更加温馨。',
          author: '张女士'
        },
        {
          id: 3,
          text: '婚礼花艺定制服务非常专业，花艺师根据我们的需求和场地特点提供了完美的设计方案，让我们的婚礼更加难忘。',
          author: '王先生'
        }
      ],
      faqItems: [
        {
          question: '送花服务覆盖哪些地区？',
          answer: '我们目前的送花服务覆盖全国300多个城市，包括所有一线城市和大部分二三线城市。您可以在下单时查询您所在地区是否在配送范围内。'
        },
        {
          question: '如何保证鲜花的新鲜度？',
          answer: '我们采用冷链物流配送，并且所有花束都是在收到订单后现场制作，确保鲜花的新鲜度。同时，我们会提供专业的养护指导，帮助您延长花期。'
        },
        {
          question: '可以指定送花时间吗？',
          answer: '是的，您可以在下单时选择指定的送花日期和时间段（上午/下午/晚上）。对于特殊场合如生日惊喜，我们会尽量按照您要求的具体时间送达。'
        },
        {
          question: '如果收花人不在家怎么办？',
          answer: '如果收花人不在家，我们的配送人员会联系收花人，根据情况可以选择放在门口、交给物业或者约定其他时间再次配送。'
        }
      ]
    };
  },
  methods: {
    toggleFaq(index) {
      if (this.activeFaq === index) {
        this.activeFaq = -1;
      } else {
        this.activeFaq = index;
      }
    }
  }
};
</script>

<style scoped>
.special-service-page {
  color: #333;
}

.section-title {
  color: #e75480;
  margin-bottom: 0.5rem;
}

.section-description {
  color: #666;
  margin-bottom: 2rem;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.service-card {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.service-card:hover {
  transform: translateY(-10px);
}

.service-image {
  height: 200px;
}

.service-content {
  padding: 1.5rem;
}

.service-title {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  color: #333;
}

.service-description {
  color: #666;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.service-price {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}

.price-label {
  color: #888;
  margin-right: 0.5rem;
}

.price-value {
  font-size: 1.5rem;
  font-weight: bold;
  color: #e75480;
}

.btn-primary {
  padding: 0.8rem 1.5rem;
  background-color: #e75480;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  font-size: 1rem;
}

.btn-primary:hover {
  background-color: #d64d7b;
}

.testimonials-section {
  margin-bottom: 3rem;
}

.testimonials-slider {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 1.5rem;
}

.testimonial-card {
  background-color: rgba(249, 249, 249, 0.9);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.testimonial-content {
  position: relative;
  margin-bottom: 1.5rem;
}

.quote-icon {
  position: absolute;
  top: -20px;
  left: -10px;
  font-size: 4rem;
  color: #f8e1e7;
  font-family: serif;
  z-index: 0;
}

.testimonial-text {
  position: relative;
  z-index: 1;
  line-height: 1.6;
  color: #555;
}

.testimonial-author {
  display: flex;
  align-items: center;
}

.author-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #e0e0e0;
  margin-right: 1rem;
}

.author-name {
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
}

.rating {
  color: #ffc107;
}

.faq-section {
  margin-bottom: 3rem;
}

.accordion {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.accordion-item {
  border-bottom: 1px solid #eee;
}

.accordion-item:last-child {
  border-bottom: none;
}

.accordion-header {
  padding: 1.2rem;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s;
}

.accordion-header:hover {
  background-color: #f9f9f9;
}

.accordion-item.active .accordion-header {
  background-color: #f8e1e7;
}

.accordion-title {
  font-size: 1.1rem;
  font-weight: 500;
}

.accordion-icon {
  font-size: 1.2rem;
  color: #e75480;
}

.accordion-content {
  padding: 1.2rem;
  background-color: rgba(249, 249, 249, 0.9);
  line-height: 1.6;
}

.cta-section {
  background-color: rgba(248, 225, 231, 0.8);
  border-radius: 12px;
  padding: 3rem 2rem;
  text-align: center;
}

.cta-title {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: #e75480;
}

.cta-description {
  color: #666;
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.btn-large {
  padding: 1rem 2rem;
  font-size: 1.1rem;
}

@media (max-width: 768px) {
  .services-grid, .testimonials-slider {
    grid-template-columns: 1fr;
  }
  
  .cta-section {
    padding: 2rem 1rem;
  }
  
  .cta-title {
    font-size: 1.5rem;
  }
}
</style>